<template>
	<app-layout>
		<search-top ref="search" @search="Search" :showtime="false" :searchForm.sync="searchForm">
			<view class="tn-bg-white topForm" v-if="putin['入库单号']">
				<tn-form class="tn-padding-xs" :labelWidth="150" :model="putin" ref="putinForm">
					<view class="tn-bg-white ">
						<tn-form-item label="入库单号">
							<tn-input v-model="putin['入库单号']" type="string" disabled></tn-input>
						</tn-form-item>
					</view>
				</tn-form>
			</view>
		</search-top>
		<view class="nav-height" v-if="putin['入库单号']"> </view>
		<view class="list">
			<!-- 入库单-->
			<view class="report tn-text-md" v-for="report,index in list" :key="report.id">
				<view class="">
					<view class="row">
						<view class="value tn-text-bold tn-text-lg">
							NO.{{index+1}}
						</view>
					</view>
					<view class="row">
						<view class="value">
							品号：{{report['品号'] }}
						</view>
						<view class="value">
							品名：{{report['品名'] }}
						</view>
					</view>

				</view>

				<block>
					<!-- 编辑-->
					<tn-form :labelWidth="120" :model="report" ref="uForm">
						<view class="tn-bg-white ">
							<tn-form-item label="入库量">
								<tn-input :max-length='8' v-model="report.goodsnum" type="Number"
									placeholder="输入入库量"></tn-input>
							</tn-form-item>
							<tn-form-item label="仓库">
								<tn-input v-model="report.ckcode" type="select" :selectOpen="badshow"
									@click="badchange(index)" placeholder='选择仓库' />
							</tn-form-item>
							<tn-form-item label="仓位">
								<tn-input v-model="report.cwcode" type="Number" placeholder="输入仓位编码"
									:disabled="putin['审核']==0"></tn-input>
								<view class="tn-margin-right-xs" slot="right">
									<text class="tn-icon-scan tn-color-blue tn-text-xxl"
										@click="scanCode(index)"></text>
								</view>
							</tn-form-item>
						</view>
					</tn-form>
				</block>
				<view @click="del(index)" class="del-tag"><text
						class="tn-icon-close-square-fill tn-color-red tn-text-xxl"></text></view>
				<view class="btn"><print-btn @print="print" :pdata="report">打印</print-btn></view>
			</view>
		</view>
		<tn-select labelName="仓库名称" valueName="仓库编号" v-model="badshow" :list="cklist" @confirm="ckconfirm"></tn-select>

		<tn-empty v-if="list.length<1" class="error" icon="/static/error/common.png" mode="data"></tn-empty>
		<view class='tn-tabbar-height'></view>

		<bottom-btn v-if="list.length>0" @edit="edit" @verify="verify" @save="save" @print="printAll"
			:status="'0'"></bottom-btn>

	</app-layout>
</template>

<script>
	import locationmixin from '@/libs/mixin/location_mixin.js'
	import SearchTop from '@/components/SearchTop'
	import {
		mapGetters,
		mapState
	} from 'vuex';
	export default {
		name: 'OTHER_ADD',
		mixins: [locationmixin],
		components: {
			SearchTop
		},
		computed: {
			...mapState({
				userinfo: state => state.userinfo
			})
		},
		data() {
			return {
				title: '新增',
				putin: {
					send_no: '',
					date: this.$utils.getAgoDay(0),
				},
				status: '',
				searchForm: {},
				more: false,

				RunType: 0,
				//拍照用的
				formData: {},

				list: [],

				//不良类型
				badshow: false,
				cklist: [],

				form: {
					cwcode: '',
					goodsnum: '',
					ckcode: '',
				},

			}
		},
		onLoad(options) {
			let {
				purchase_no
			} = options
			if (purchase_no) this.searchForm.purchase_no = purchase_no
			this.cklist = this.$storage.getStorageSync('cklist')
		},

		onReady() {},
		onShow() {
			let t = this;
			if (!t.userinfo) t.$user.getInfo()
		},
		methods: {

			print() {
				console.log('print')
			},
			edit() {
				console.log('edit')
			},
			verify() {
				console.log('verify')
			},
			save() {
				console.log('save')
				let that = this;
				if (!that.check()) return;
				that.$t.message.loading("提交中");
				that.$request({
					url: that.$api.otherin.add,
					data: {
						ie_no: that.putin['入库单号'],
						director: that.userinfo.FstaffName,
						ie_time: that.putin.date,
						ie_list: that.list,
					},
					method: "POST",
				}).then(response => {
					that.$t.message.closeLoading();
					that.putinit()
					uni.showModal({
						title: '提示',
						content: '添加成功，是否前往审核?',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: `mes/otherin/detail?purchase_no=${response.info.ie_no || ''}`,
								});
								console.log('用户点击确定');
							}
						}
					});
				}).catch((msg) => {
					that.$t.message.toast(msg);
					that.$t.message.closeLoading();
				});
			},

			printAll() {
				console.log('printAll')
			},
			scanCode(index) {
				let that = this;
				that.$jwx.scanQRCode().then(res => {
					that.list[index].cwcode = res
				})
			},

			Search(e) {
				console.log(e)
				this.searchForm = e;
				this.getList(1)
			},

			badchange(idx) {
				this.activeIndex = idx;
				this.badshow = true;
			},


			ckconfirm(e) {
				this.list[this.activeIndex].ck = e[0].value;
				this.list[this.activeIndex].ckcode = e[0].label;
			},

			del(index) {
				this.list.splice(index, 1)
			},
			check() {
				let that = this;
				let r = that.list.find(li => {
					return !li.goodsnum || li.goodsnum <= 0
				})
				if (r && that.list.length > 0) {
					uni.showToast({
						title: '您还未输入入库量',
						icon: 'none'
					})
					return false;
				}
				return true;
			},
			getList(issearch = 0) {
				let that = this;
				that.$t.message.loading("加载中");
				that.$request({
					url: that.$api.otherin.info,
					data: {
						limit_page: that.page,
						limit_count: 20,
						item_no: that.searchForm.work_number || '',
						type: 1
					}
				}).then(response => {
					that.$t.message.closeLoading();
					that.putin = {
						...that.putin,
						...response.info
					}
					let reslist = [];
					if (response.list.length > 0) {
						response.list.forEach(e => {
							reslist.push({
								pics: [],
								...e,
								...that.$t.deepClone(that.form),
								ckcode: e['仓库'] || that.cklist[0]['仓库名称'],
								cwcode: e['仓位'] || ''
							})
						})
					}
					that.list = that.list.concat(reslist);

				}).catch((msg) => {
					that.putinit()
					that.$t.message.toast(msg);
					that.$t.message.closeLoading();
				});
			},
			putinit() {
				this.searchForm.work_number = '';
				// this.$set(this, 'searchForm', this.searchForm);
				this.list = [];
				this.putin = {
					send_no: '',
					date: this.$utils.getAgoDay(0),
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.list {
		margin-top: 100upx;

	}

	.topForm {
		position: relative;

		.status {
			display: flex;
			min-width: 150upx;
			align-items: center;
			justify-content: center;
			color: #fff;
			position: absolute;
			right: 0;
			top: 20upx;
			padding: 10upx 0;
			border-radius: 25upx;
		}
	}

	.nav-height {
		height: 120upx;
	}

	.btn {
		padding-top: 20upx;
		padding-top: 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.report {
		background: #fff;
		padding: 20upx;
		border: 1upx solid #eee;
		margin: 10upx;
		border-radius: 10upx;
		box-shadow: 1px 1px 0px 0px #aba7a7;
		position: relative;

		.row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10upx 0;
		}

		.value {
			min-width: 50%;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.tn-form-item {
			padding: 0;
		}

		.del-tag {
			position: absolute;
			top: 10upx;
			right: 10upx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.right {
		width: 32%;
		display: flex;
		justify-content: space-evenly;
		align-content: center;
		flex-wrap: wrap;

		.more {
			font-size: 40upx;
			display: flex;
			align-items: center;
		}
	}

	.userinfo {
		display: flex;
		font-size: 26upx;
		align-items: center;
		padding: 0 10px;
	}

	.search {
		background-color: #fff;
		padding: 10px;



		.search-btn {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-top: 20upx;
			border-top: 2px solid #eee;
		}
	}

	/* 底部安全边距 start*/
	.tn-tabbar-height {
		min-height: 120rpx;
		height: calc(140rpx + env(safe-area-inset-bottom) / 2);
		height: calc(140rpx + constant(safe-area-inset-bottom));
	}
</style>